<template>
  <div class="container">
    <div class="title">热门搜索</div>
    <ul class="hot">
      <li
        v-for="(item, index) in hot"
        :key="item.id"
        @click="gotoDetail(item.id, item.name)"
      >
        <div class="num">{{ index + 1 }}</div>
        <div class="name">{{ item.name }}</div>
      </li>
    </ul>
    <div class="title">
      <span>最近搜索</span>
      <i class="iconfont icon-shanchu1" @click="confirmDele"></i>
    </div>
    <ul class="history" v-if="readHistory.length > 0">
      <li v-for="(v, i) in readHistory" :key="i" @click="goSearch(v)">
        <i class="iconfont icon-sousuo" v-if="!v.ishot"></i>
        <i class="iconfont icon-shuben" v-if="v.ishot"></i>
        <div class="name">{{ v.name }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    hot: {
      type: Array,
      default() {
        return [];
      },
    },
    readHistory: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      ishot: false,
      bookid: -1,
    };
  },
  methods: {
    gotoDetail(id, name) {
      this.$emit("saveHistory", { val: name, ishot: true, bookid: id });
      this.$router.push("/detail?sourceUuid=" + id);
    },
    goSearch(v) {
      if (v.ishot) {
        this.hot.find((item) => {
          return item.name == v.name;
        });

        this.$router.push("/detail?sourceUuid=" + v.bookid);
        return;
      }
      this.$emit("goSearch", v.name);
    },
    confirmDele() {
      this.$emit("confirmDele");
    },
  },
};
</script>

<style lang="scss" scoped>
// .container {
//   margin-top: 60px;
// }
$bg: #ddd;
.title {
  font-size: 18px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hot {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  li {
    width: 46%;
    display: flex;
    align-items: center;
    padding: 5px;
    margin-bottom: 10px;
    $size: 20px;
    .num {
      width: $size;
      height: $size;
      line-height: $size;
      border-radius: 50%;
      margin: 0 10px;
      color: #fff;
      font-size: 14px;
      background-color: $bg;
    }
    .name {
      font-size: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    &:nth-child(1) {
      .num {
        background-color: #ff0000;
      }
    }
    &:nth-child(2) {
      .num {
        background-color: #ff8800;
      }
    }
    &:nth-child(3) {
      .num {
        background-color: #ffd900;
      }
    }
  }
}
.history {
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  li {
    padding: 5px 10px;
    padding-left: 18px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: $bg;
    position: relative;
    .iconfont {
      position: absolute;
      left: 0;
      top: 50%;
      font-size: 14px;
      transform: translate(10%, -50%);
    }
  }
}
</style>